<template>
  <view class="wrapper bg-linear">
    <view 
      v-for="(item, index) in list" 
      :key="index"
      class="post-card"
      style="background-color: #fff; margin-bottom: 20rpx; border-radius: 15rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);"
    >
      <!-- 用户信息 -->
      <view class="user-info" style="padding: 20rpx; border-bottom: 1rpx solid #f0f0f0; display: flex; align-items: center;">
        <van-image 
          v-if="item.user?.avatar_text" 
          :src="item.user.avatar_text" 
          round 
          style="width: 70rpx; height: 70rpx; margin-right: 20rpx;"
        />
        <van-image 
          v-else 
          src="/static/image/default-avatar.png" 
          round 
          style="width: 70rpx; height: 70rpx; margin-right: 20rpx;"
        />
        <div>
          <text class="username" style="font-size: 28rpx; font-weight: 500; color: #333;">
            {{ item.user?.username || '神秘同学' }}
          </text>
          <text class="meta" v-if="item.typeid !== '1'" style="font-size: 24rpx; color: #666; margin-top: 5rpx;">
            {{ item.user?.sex === '男' ? '男' : '女' }} · {{ item.age }}岁 · {{ item.height }}cm
          </text>
        </div>
      </view>

      <!-- 帖子内容 -->
      <view class="post-content" style="padding: 20rpx; line-height: 1.6;">
        <text class="title" style="font-size: 30rpx; font-weight: 600; color: #1A1A1A; margin-bottom: 10rpx;">
          {{ item.title }}
        </text>
        <text class="desc" style="font-size: 26rpx; color: #666;">
          {{ item.content }}
        </text>

        <!-- 图片列表 -->
        <view class="image-container" v-if="item.images_text.length > 0" style="margin: 20rpx 0;">
          <van-grid 
            column-num="3" 
            :border="false" 
            gutter="10rpx"
            style="width: 100%;"
          >
            <van-grid-item v-for="img in item.images_text" :key="img">
              <van-image 
                :src="img" 
                radius="10px" 
                style="width: calc((100% - 20rpx) / 3); height: 180rpx;"
              />
            </van-grid-item>
          </van-grid>
        </view>
      </view>

      <!-- 互动栏 -->
      <view class="action-bar" style="padding: 20rpx; border-top: 1rpx solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
        <view class="location" style="display: flex; align-items: center;">
          <van-icon name="location" color="#3c91ff" size="30rpx" />
          <text style="margin-left: 8rpx; font-size: 26rpx; color: #666;">{{ item.depname }}</text>
        </view>

        <view class="interaction" style="display: flex; align-items: center;">
          <view class="like-btn" @click="onGiveLike(item.id)" style="margin-right: 30rpx;">
            <van-icon 
              :name="item.likestatus === 1 ? 'like' : 'like-o'" 
              color="#e5404f" 
              size="42rpx" 
            />
            <text style="margin-left: 5rpx; font-size: 26rpx; color: #333;">{{ item.likenum }}</text>
          </view>
          <view class="comment-btn">
            <van-icon name="comment" color="#3c91ff" size="42rpx" />
            <text style="margin-left: 5rpx; font-size: 26rpx; color: #333;">{{ item.commentnum }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ppl-circleList",
  props: {
    list: {
      type: Array,
      required: true,
      default: () => [],
    },
    circleType: {
      type: String,
      default: "1",
    },
  },
  methods: {
    onGiveLike(id) {
      this.$emit('onGiveLike', id);
    },
    ondelGiveLike(id) {
      this.$emit('ondelGiveLike', id);
    },
    ondelCircleLike(id) {
      this.$emit('ondelCircleLike', id);
    },
  },
};
</script>

<style scoped>
.post-card {
  background-color: #ffffff;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.user-info {
  padding: 24rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.post-content {
  padding: 24rpx;
}

.title {
  color: #1a1a1a;
  font-weight: 500;
}

.desc {
  color: #666666;
  margin-top: 12rpx;
}

.image-container {
  margin-top: 20rpx;
}

.action-bar {
  padding: 24rpx;
  background-color: #f8f8f8;
}

.like-btn, .comment-btn {
  display: flex;
  align-items: center;
  gap: 5rpx;
  font-size: 24rpx;
}
</style>